<template>
    <base-dialog v-model="dialogVisibleSept" title="实验阶段数据" width="95%" height="100%">

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="序号" width="50" align="center">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="stepName" label="阶段名称" width="100"></el-table-column>
      <el-table-column prop="stepTime" label="本阶段时长(min)" width="100"></el-table-column>
      <el-table-column prop="stepStempu" label="设定温度上（℃）" width="120"></el-table-column>
      <el-table-column prop="stepStempm" label="设定温度中（℃）" width="120"></el-table-column>
      <el-table-column prop="stepStempd" label="设定温度下（℃）" width="120"></el-table-column>
      <el-table-column prop="stepCarrier" label="设定载气量（L/min）" width="150"></el-table-column>
      <el-table-column prop="stepHydrogen" label="设定氢气量（L/min）" width="150"></el-table-column>
      <el-table-column prop="stepCarbons" label="设定碳源量（L/min）" width="150"></el-table-column>
      <el-table-column prop="stepWater" label="设定水流量（g/min）" width="150"></el-table-column>
      <el-table-column prop="stepTp" label="时间累计量（min）" width="150"></el-table-column>
      <el-table-column prop="plc1" label="实际温度上（℃）" width="120"></el-table-column>
      <el-table-column prop="plc2" label="实际温度中（℃）" width="120"></el-table-column>
      <el-table-column prop="plc3" label="实际温度下（℃）" width="120"></el-table-column>
      <el-table-column prop="plc4" label="实际载气量（L/min）" width="150"></el-table-column>
      <el-table-column prop="plc5" label="实际氢气量（L/min）" width="150"></el-table-column>
      <el-table-column prop="plc6" label="实际碳源量（L/min）" width="150"></el-table-column>
      <el-table-column prop="plc7" label="实际水流量（g/min）" width="150"></el-table-column>
      <el-table-column prop="plc8" label="实际氢气含量（%）" width="150"></el-table-column>
      <el-table-column prop="state" label="阶段状态" width="120"></el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleSept = false">确 定</el-button>
      </span>
    </template>
  </base-dialog>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from 'axios';
import BaseDialog from "@/components/Base/base-dialog.vue";

interface TableDataItem {
  stageName: string;
  stageDuration: number;
  setTemperatureUp: number;
  setTemperatureMid: number;
  setTemperatureDown: number;
  setGasVolume: number;
  setHydrogenVolume: number;
  setCarbonSourceVolume: number;
  setWaterFlow: number;
  timeAccumulation: number;
  actualTemperatureUp: number;
  actualTemperatureMid: number;
  actualTemperatureDown: number;
  actualGasVolume: number;
  actualHydrogenVolume: number;
  actualCarbonSourceVolume: number;
  actualWaterFlow: number;
  actualHydrogenContent: number;
  stageStatus: string;
}

export default defineComponent({
  components: {BaseDialog},
  props: {
    rowId: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    const dialogVisibleSept = ref(false);
    const tableData = ref<TableDataItem[]>([]);

    const fetchData = async () => {
      try {
        const response = await axios.get(`/res/experimentset/list/${props.rowId}`);
        tableData.value = response.data;
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    };

    fetchData();

    return {
      dialogVisibleSept,
      tableData
    };
  }
});
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>